import { FC } from 'react';
import { Button, Flex, message } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import { UserOutlined } from '@ant-design/icons';
import { LOGIN_PATHNAME } from '../routers/index';
import { useDispatch } from 'react-redux';
import { removeInfoUser } from '../store/user';
import { getUserInfo } from '../utils/user-token';

const UserInfo: FC = () => {
    const nav = useNavigate();
    const dispatch = useDispatch();
    const userInfo = getUserInfo()
    function logout() {
        dispatch(removeInfoUser());
        message.success('退出成功');
        nav(LOGIN_PATHNAME);
    }

    const userInfoDisplay = () => {

        return (
            <Flex align="center">
                <div style={{ color: '#e8e8e8' }}>
                    <UserOutlined />
                    {userInfo}
                </div>
                <Button type="link" onClick={logout}>
                    退出
                </Button>
            </Flex>)
    };

    const Login = <Link to={LOGIN_PATHNAME}>登录</Link>;

    return <div>{userInfo ? userInfoDisplay() : Login}</div>; // 注意这里去掉了 `?.nickname`，因为我们在三元运算符中已经检查了 `user`
}

export default UserInfo;